<template>
    <nav>
        <a href="javascript:;" :class="{ active: activeName === 'detail' }"
            @click="clickTab('detail')">商品详情</a>
        <a href="javascript:;" :class="{ active: activeName === 'comment' }"
            @click="clickTab('comment')">商品评价<span>({{goods.commentCount}})</span></a>
    </nav>
    <component :is="'goods-'+activeName" />
</template>

<script>
import { inject, ref } from 'vue'
import GoodsDetail from './goods-detail.vue'
import GoodsComment from '@/views/goods/goods-comment.vue'
export default {
    name: "GoodsTabs",
    components: {
        GoodsComment,
        GoodsDetail,
    },

    setup() {
        // detail-->详情   comment-->评价
        const activeName = ref('detail')
        const clickTab = (name) => {
            activeName.value = name
        }
        const goods = inject('goods')
        console.log('test1',goods)
        return { activeName, clickTab,goods }
    }
}
</script>

<style lang="less" scoped>
@import '@/assets/styles/variables.less';


nav {
    height: 70px;
    line-height: 70px;
    display: flex;
    border-bottom: 1px solid #f5f5f5;

    a {
        padding: 0 40px;
        font-size: 18px;
        position: relative;

        >span {
            color: @priceColor;
            font-size: 16px;
            margin-left: 10px;
        }

        &:first-child {
            border-right: 1px solid #f5f5f5;
        }

        &.active {
            &::before {
                content: "";
                position: absolute;
                left: 40px;
                bottom: -1px;
                width: 72px;
                height: 2px;
                background: @xtxColor;
            }
        }
    }
}
</style>